<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="includes/layout">

<div layout:fragment="sidebar" th:replace="includes/sidebar :: test"></div>

<div layout:fragment="content">
    <div class="layui-row layui-col-space10" id="projectConfigWrap">
        <div class="layui-col-md4">
            <blockquote class="layui-elem-quote">
                模块配置
            </blockquote>
            <button class="layui-btn layui-btn-normal" th:onclick="|ProjectConfig.initModule()|">初始化模块</button>
            <button class="layui-btn layui-btn-normal" data-method="editModule">新增模块</button>
            <table class="layui-table" lay-data="{
                    height:332
                    ,url: '/api/projectModules'
                    ,where: {projectConfigId: Main.projectConfigId}
                    ,page: false
                    ,id: 'projectModulesTable'}" lay-filter="projectModules">
                <thead>
                <tr>
                    <th lay-data="{field:'moduleName', width:140}">模块名</th>
                    <th lay-data="{field:'moduleNameCn', width:100}">展示名</th>
                    <th lay-data="{field:'controlMappingUri', width:140}">ControlMappingUri</th>
                    <th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#barProjectModules'}"></th>
                </tr>
                </thead>
            </table>
            <script type="text/html" id="barProjectModules">
                <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
            </script>

            <blockquote class="layui-elem-quote">
                项目配置
            </blockquote>
            <table class="layui-table">
                <colgroup>
                    <col width="300"><col>
                </colgroup>
                <thead>
                    <tr><th th:width="300">名称</th><th>值</th></tr>
                </thead>
                <tbody th:object="${projectConfig}">
                    <tr><td>ID</td><td th:text="*{projectConfigId}"></td></tr>
                    <tr><td>项目名</td><td th:text="*{projectName}"></td></tr>
                    <tr><td>包名</td><td th:text="*{projectPackageName}"></td></tr>
                    <tr><td>数据库驱动</td><td th:text="*{databaseDriver}"></td></tr>
                    <tr><td>数据链接</td><td th:text="*{databaseUrl}"></td></tr>
                    <tr><td>数据库地址</td><td th:text="*{databaseIp}"></td></tr>
                    <tr><td>数据库端口</td><td th:text="*{databasePort}"></td></tr>
                    <tr><td>数据库用户名</td><td th:text="*{databaseUsername}"></td></tr>
                    <tr><td>数据库密码</td><td th:text="*{databasePassword}"></td></tr>
                    <tr><td>数据库名</td><td th:text="*{databaseDbName}"></td></tr>
                    <tr><td>权限类型</td><td th:text="*{securityType}"></td></tr>
                </tbody>
            </table>
        </div>

        <div class="layui-col-md8">
            <blockquote class="layui-elem-quote">
                功能配置
            </blockquote>
            <button class="layui-btn layui-btn-normal" th:onclick="|ProjectConfig.initFunction()|">初始化功能</button>
            <table class="layui-table" lay-data="{
                    height:332
                    ,url: '/api/moduleFunctions'
                    ,where: {projectModuleId: ProjectConfig.projectModuleId}
                    ,page: false
                    ,id: 'moduleFunctionsTable'}" lay-filter="moduleFunctions">
                <thead>
                <tr>
                    <th lay-data="{field:'functionName', width:140}">方法名</th>
                    <th lay-data="{field:'functionNameCn', width:100}">展示名</th>
                    <th lay-data="{field:'controlMappingUri', width:140}">ControlMappingUri</th>
                    <th lay-data="{field:'controlMethod', width:140}">请求类型</th>
                    <th lay-data="{field:'returnObject', width:140}">返回类型</th>
                    <th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#barProjectModules'}"></th>
                </tr>
                </thead>
            </table>
            <script type="text/html" id="barModuleFunctions">
                <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>

<div layout:fragment="js">
<script type="text/javascript">
    var ProjectConfig = {
        projectModuleId: ""
    };

    layui.use(['element', 'layer', 'table'], function() {
        var $ = layui.jquery,
            layer = layui.layer,
            table = layui.table;

        // 初始化模块
        ProjectConfig.initModule = function() {
            layer.confirm('初始化会覆盖所有模块设置和所有功能设置，确认初始化吗？', function(index) {
                if(index) {
                    $.post("/api/initModule", {
                        "projectConfigId": Main.projectConfigId
                    }, function(res) {
                        console.log(res);
                    });
                }

                layer.close(index);
            });
        }

        // 初始化功能
        ProjectConfig.initFunction = function() {
            layer.confirm('初始化会覆盖所有默认模块的功能设置，确认初始化吗？', function(index) {
                if(index) {
                    $.post("/api/initFunction", {
                        "projectConfigId": Main.projectConfigId
                    }, function(res) {
                        console.log(res);
                    });
                }

                layer.close(index);
            });
        }

        //监听工具条
        table.on('tool(projectModules)', function(obj) {
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                table.reload("moduleFunctionsTable", {
                    where: {projectModuleId: data.projectModuleId}
                });
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);

                    $.post("/api/projectModule/" + data.projectModuleId, {}, function (res) {
                        if(res != null && res > 0) {
                            layer.msg("操作成功", {icon: 6});
                        } else {
                            layer.msg('操作失败', {icon: 5});
                        }
                    });
                });
            } else if(layEvent === 'edit'){
                layers.editModule.call(this, obj);
            }
        });

        var layers = {
            editModule: function(obj) {
                var data = obj.data;
                var projectModuleId = data.projectModuleId == null ? "" : data.projectModuleId;

                //多窗口模式，层叠置顶
                layer.open({
                    type: 2
                    ,title: '编辑模块'
                    // ,shade: 0 // 0的话才可以进行两个弹框的切换
                    ,area: ['700px', '300px']
                    ,maxmin: true
                    ,content: '/manage/projectConfig/editModule?projectModuleId=' + projectModuleId
                });
            }
        }

        $('#projectConfigWrap .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            layers[method] ? layers[method].call(this, othis) : '';
        });
    });
</script>
</div>

</html>